﻿@using XRM.Security.WebUI.Helpers
@model XRM.Security.WebUI.Models.UserRegister.UserRegisterAddPCModel
@{
    ViewBag.Title = "Добавление системного блока";
    Layout = "~/Views/Shared/_LayoutDialog.cshtml";
}

<style type="text/css">
</style>

<div class="modal-body" style="height:260px;padding-left:20px;overflow-y:auto;">
    @using (Html.BeginForm("AddUserPCDialog", "UserRegister", FormMethod.Post, new { id = "dlgAddUserPCDialogForm", @class = "form-horizontal form-horizontal-2" }))
    {      
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m => m.UserRegisterId)
        @Html.HiddenFor(m => m.Id)
        const string inputCss = "form-control";
        const string divCss = "col-sm-8";
        
        <div class="form-group">
            @Html.LabelFor(m => m.SerialNumber, new { @class = "control-label required" })
            <div class="@divCss">
                @Html.TextBoxFor(m => m.SerialNumber, new { @class = @inputCss })
                @Html.ValidationMessageFor(m => m.SerialNumber)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.PCHost, new { @class = "control-label required" })
            <div class="@divCss">
                @Html.TextBoxFor(m => m.PCHost, new { @class = @inputCss })
                @Html.ValidationMessageFor(m => m.PCHost)
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(m => m.StickerList, new { @class = "control-label" })
            <div class="@divCss control-text">
                <div data-bind="template: { name: 'sticker-template', foreach: Sticker }"></div>
                <div>
                    @Html.ValidationMessageFor(m => m.StickerList)
                </div>
                <a href="#" data-bind="click: addSticker">Добавить номер наклейки</a>
            </div>
        </div>
    }    
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary submitBtn" id="btnSave">Сохранить</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>

<script type="text/html" id="sticker-template">
    <div class="input-list-item input-group">
        <input type="hidden" name="StickerList[].Id" data-bind="attr: { name: 'StickerList[' + $index() + '].Id' }, value: id" />
        <input type="text" class="form-control" maxlength="100" name="StickerList[].Name" data-bind="attr: { name: 'StickerList[' + $index() + '].StickerNumber' }, value: name, hasfocus: true" />
        @if (!Model.ReadOnly)
        {
        <span class="input-group-btn">
            <button title="Удалить номер наклейки" class="btn btn-default" type="button" data-bind="click: $parent.removeSticker">
                <i class="fa fa-times"></i>
            </button>
        </span>
        }
    </div>
</script>

<script src="@Url.Content("~/Scripts/knockout-3.2.0.js")"></script>
    <script type="text/javascript">
        function AddUserPCViewModel() {
            var self = this;

            self.Sticker = ko.observableArray([
                @{
                    if ((Model.StickerList != null) && (Model.StickerList.Count() > 0))
                    {
                        foreach (var item in Model.StickerList)
                        {
                            <text>{ id: '@item.Id', name: '@Html.Raw(Utils.PrepareStringToJS(item.StickerNumber))' },</text>
                        }
                    }
                }
            ]);

            self.addSticker = function () {
                self.Sticker.push({ id: "-1", name: "" });
                
            };

            self.removeSticker = function () {
                self.Sticker.remove(this);
            };
        }

        ko.applyBindings(new AddUserPCViewModel());
</script>
